import SyntaxHighlighter from '@/components/SyntaxHighlighter'
import { outletCode, navigationCode, paramsCode, searchCode, locationCode, code1, code2, code3, code4, code5 } from './codeData'
import { Outlet, useNavigate, useParams, useSearchParams } from 'react-router-dom'

function UseRouter() {
  const navigate = useNavigate()
  const { id } = useParams()
  const [searchParams, setSearchParams] = useSearchParams()

  const handleShowChildrenA = () => {
    navigate('a', {
      state: {
        componentName: 'A'
      }
    })
  }

  const handleShowChildrenB = () => {
    navigate('b')
  }

  const handleSearchParams = () => {
    alert(searchParams.get('name'))
  }

  return (
    <div>
      <h1>路由的使用方法</h1>
B
      <h3>参数说明</h3>
      <h4>Outlet：</h4>
      <p>1. 嵌套路由与动态占位符</p>
      <p>2. 还可以通过 context 传递数据，子组件里用 { 'useOutletContext()' } 可以获取</p>
      <button onClick={handleShowChildrenA}>显示ChildrenA</button>
      <button onClick={handleShowChildrenB}>显示ChildrenB</button>
      <Outlet context={{ name: 'pony' }} />
      <SyntaxHighlighter children={outletCode} />
      <p><b>Link</b> 相当于 vue-router 的 router-link，用于跳转。</p>
      <p><b>NavLink</b> 跟 Link 是一样的功能，区别就是 NavLink 默认加了一个 active 的 class 类名。修改这个类名用 activeClassName="xxx"</p>
      <p><b>useNavigate</b> 跳转方法</p>
      <p><b>useLocation</b> 获取当前路径的信息</p>
      <SyntaxHighlighter children={locationCode} />
      <p><b>useParams</b> 获取路径参数</p>
      <button onClick={() => alert(id)}>获取id</button>
      <SyntaxHighlighter children={paramsCode} />
      <p><b>useSearchParams</b></p>
      <button onClick={handleSearchParams}>获取searchParams</button>
      <button onClick={() => setSearchParams({ ...Object.fromEntries(searchParams), name: '刘亦菲' })}>设置searchParams获取到的值</button>
      <SyntaxHighlighter children={searchCode} />
      <p><b>useHistory</b> 钩子返回 history 对象，你可以在上面进行导航等操作</p>
      <p><b>useNavigation</b> 实时获取跳转状态</p>
      <SyntaxHighlighter children={navigationCode} />
      <p><b>useLoaderData</b> 获取在路由里 loader 参数返回的数据</p>

      <h3>安装</h3>
      <SyntaxHighlighter language="json" children={code1}/>

      <h3>使用</h3>
      <SyntaxHighlighter children={code2} />
      <h4>路由模式：</h4>
      <p>createHashRouter：</p>使用URL的哈希部分（即#后面的部分）来匹配路由，它不会向服务器发送请求。
      <p>createBrowserRouter：</p>使用 html5 History API 来匹配路由，使用 html5 的 pushState 和 replaceState API 来实现路由的切换。
      <p>createMemoryRouter：是一个不依赖于浏览器历史记录的路由器。它将 URL 存储在内存中，而不是浏览器历史记录中，适用于测试或在不支持 HTMl5 Histtory API 的环境中使用。</p>
      <p>createStaticRouter：是一个用于服务器端渲染的路由器。它将请求 URL 作为参数传递给组件，并将组件的输出发送回客户端。这样就可以在服务器端生成动态HTML，然后将其发送到浏览器。</p>

      <h3>在 main.jsx 文件中</h3>
      <SyntaxHighlighter children={code3} />

      <h3>按需加载与代码分割</h3>
      <p>动态导入 + 懒加载</p>
      <SyntaxHighlighter children={code4} />
      <p>缓存策略与数据复用</p>
      <SyntaxHighlighter children={code5} />
    </div>
  )
}

export default UseRouter